<script lang="ts" setup>
import type { VxeGridProps, VxePagerEvents } from 'vxe-table'

import { SearchTable } from '@fl/components'
import { cloneDeep } from 'lodash-es'
import { findActivityCountDetail, findActivityUserPage } from '@fl/api/anjutong/seckill-manage'

const props = withDefaults(defineProps<{
    id: string
    name: string
}>(), {
    id: '',
    name: 'discount',
})
const { id } = toRefs(props)
const dialogInitialState = {
    activeTime: [], // 使用时间
    userName: undefined, // 用户名称
}
const timeRange = ref({
    endTime: undefined,
    startTime: undefined,
})
const dialogState = ref(cloneDeep(dialogInitialState))
// "activityId":"024cb85ef57b4e2ea87c26c65da3e25d","starTime":"2025-04-23 00:00:00","endTime":"2025-04-24 23:59:59"
const dialogcolumns = [
    {
        colProps: {
            span: 24,
        },
        fieldProps: {
            'endPlaceholder': '结束日期',
            'startPlaceholder': '开始日期',
            'type': 'daterange',
            'value-format': 'YYYY-MM-DD',
        },
        label: '活动时间',
        prop: 'activeTime',
        valueType: 'date-picker',
    },

]

const dialogGridOptions = reactive<VxeGridProps>({
    columns: [
        { title: '序号', type: 'seq', width: 70 },
        { field: 'userName', title: '客户姓名' },
        { field: 'contactInformation', title: '联系方式' },
        { field: 'payTime', title: '付款时间' },
        { field: 'seckillHouse', title: '秒杀房源' },

    ],
})
const dialogInitialPage = {
    pageNum: 1,
    pageSize: 100000,
    total: 0,
}
const tablePage = ref(cloneDeep(dialogInitialPage))
const dialogisLoading = ref(false)
const tableList = ref([])
const tagList = ref([
    {
        field: 'receiveQuantity',
        num: 0,
        title: '领取张数',
    },
    {
        field: 'seckillHouse',
        num: 0,
        title: '领取人数',
    },
    {
        field: 'useQuantity',
        num: 0,
        title: '使用张数',
    },
    {
        field: 'userQuantity',
        num: 0,
        title: '使用人数',
    },
])
const channelList = ref([])

watch(id, (val: string) => {
    if (val) {
        init()
    }
}, {
    deep: true,
    immediate: true,
})

/**
 * methods start
 */

function init() {
    getStatistics()
    getDataList()
}

function doSearch() {
    init()
}

function resetForm() {
    dialogState.value.activeTime = []
    init()
}

// 获取统计数据
function getStatistics() {
    findActivityCountDetail({
        activityId: props.id,
        starTime: dialogState.value.activeTime.length > 0 ? `${dialogState.value.activeTime[0]} 00:00:00` : undefined,
        endTime: dialogState.value.activeTime.length > 0 ? `${dialogState.value.activeTime[1]} 23:59:59` : undefined,
    }).then((res) => {
        tagList.value = [
            {
                field: 'shareCount',
                num: res.data.shareCount,
                title: '分享次数',
            },
            {
                field: 'browseCount',
                num: res.data.browseCount,
                title: '浏览次数',
            },

            {
                field: 'browsePeopleCount',
                num: res.data.browsePeopleCount,
                title: '浏览人数',
            },
            {
                field: 'payCount',
                num: res.data.payCount,
                title: '付款人数',
            },
        ]
    })
}

// 获取数据列表
function getDataList() {
    findActivityUserPage({
        activityId: props.id,
        starTime: dialogState.value.activeTime.length > 0 ? `${dialogState.value.activeTime[0]} 00:00:00` : undefined,
        endTime: dialogState.value.activeTime.length > 0 ? `${dialogState.value.activeTime[1]} 23:59:59` : undefined,
        pageNum: tablePage.value.currentPage,
        pageSize: tablePage.value.pageSize,
    }).then((res) => {
        tableList.value = res.rows
        tablePage.value.total = res.total
    })
}

const dialoghandlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.value.currentPage = currentPage
    tablePage.value.pageSize = pageSize
    getDataList()
}
function dialogReset() {
    dialogState.value = cloneDeep(dialogInitialState)
    timeRange.value = {
        endTime: '',
        startTime: '',
    }
    tablePage.value = cloneDeep(dialogInitialPage)
    getDataList()
}

function dialogSearch(values) {
    if (values) {
        dialogState.value = values
        if (values.useTime) {
            timeRange.value.startTime = values.useTime[0]
            timeRange.value.endTime = values.useTime[1]
        }
        else {
            timeRange.value.startTime = undefined
            timeRange.value.endTime = undefined
        }
        getDataList()
        getStatistics()
    }
}

/**
 * methods end
 */
</script>

<template>
    <div class="activity-data">
        <div class="coupon-data-list">
            <el-form :model="form">
                <el-col :span="16">
                    <el-form-item label="活动时间"
                                  prop="activeTime"
                    >
                        <el-date-picker v-model="dialogState.activeTime"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始时间"
                                        end-placeholder="结束时间"
                                        clearable
                                        value-format="YYYY-MM-DD"
                                        placeholder="选择活动时间"
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="4"
                        style="text-align: right;"
                >
                    <el-button type="primary"
                               @click="doSearch()"
                    >
                        搜索
                    </el-button>

                    <el-button @click="resetForm">
                        重置
                    </el-button>
                </el-col>
            </el-form>

            <div class="coupon-info">
                <div class="base-info">
                    <dl v-for="tag in tagList"
                        :key="tag.title"
                        :class="['receiveQuantity', 'recipientQuantity'].includes(tag.field) ? 'tag sheet-num' : 'tag people-num'"
                    >
                        <dt>{{ tag.title }}</dt>

                        <dd>{{ tag.num }}</dd>
                    </dl>
                </div>
            </div>

            <SearchTable v-bind="dialogGridOptions"
                         v-model:pager="dialogtablePage"
                         :loading="dialogisLoading"
                         :data="tableList"
                         :min-height="360"
                         @page-change="dialoghandlePageChange"
            >
                <template #channelCode="{ row }">
                    <el-select v-model="row.channelCode"
                               placeholder="Select"
                    >
                        <el-option v-for="item in channelList"
                                   :key="item.channelCode"
                                   :label="item.channelName"
                                   :value="item.channelCode"
                        />
                    </el-select>
                </template>
            </SearchTable>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.coupon-info {
    .base-info {
        display: flex;
        .tag {
            flex: 1;
            height: 70px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 0;
            margin-right: 20px;
            padding: 0;
            dt {
                font-size: 16px;
                margin: 0;
                padding: 0;
            }
            dd {
                font-size: 24px;
                font-weight: 600;
                margin: 0;
                padding: 0;
            }
            &.sheet-num {
                background-color: #e5f0fa;
                dd {
                    color: #006dcc;
                }
            }
            &.people-num {
                background-color: #fff0f0;
                dd {
                    color: #da0004;
                }
            }
        }
    }
}
.coupon-data-list {
    margin-top: 24px;
    .el-form {
        display: flex;
        justify-content: space-between;
    }
    :deep(.plus-form .plus-form__footer) {
        margin-right: 50px;
    }
}
.vxe-grid {
    height: calc(100vh - 365px) !important;
}
</style>
